<!--
 * @description: 公共卡片视图
 * @fileName: index
 * @author: 17076
 * @date: 2025/2/20-上午11:44
 * @version: V1.0.0
-->

<template>
  <div class="base-card-content">
    <div class="flex-row card-header">
      <slot name="header">
        <div class="flex-row" style="align-items: center">
          <i class="left-border"/>
          <slot name="title">
            <span class="header-title">{{ title }}</span>
          </slot>
        </div>
      </slot>
      <slot name="right"/>
    </div>
    <div style="margin-top: 10px;height: 100%">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  }
}
</script>

<style scoped lang="scss">
 .base-card-content {
   padding: 16px;
   border-radius: 8px;
   box-sizing: border-box;
   background: $base-content-background;
   color: $base-color-white;
   .card-header {
     align-items: center;
     justify-content: space-between;
     .left-border {
       width: 4px;
       height: 18px;
       border-radius: 4px;
       background: $base-color-default;
     }
     .header-title {
       margin-left: 10px;
     }
   }
 }
</style>
